<template>
  <Main id="111">
    <div class="depart-tree">
      <el-tabs tab-position="left" v-model="name" style="height: 100%" @tab-click="handleNodeClick">
        <el-tab-pane
          v-for="(item, index) in LeftTableData"
          :key="index"
          :label="item.type"
          :name="item.objectId"
          class="el-tabs__nav-scroll"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="right">
      <el-table
        :data="tableData"
        :empty-text="emptyText"
        style="width: 100%"
        row-key="objectId"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column fixed prop="id" label="流程ID"></el-table-column>
        <el-table-column fixed prop="resourceName" label="流程名称"></el-table-column>
        <el-table-column prop="deploymentId" label="部署ID"></el-table-column>
        <el-table-column prop="key" label="key"></el-table-column>
        <el-table-column prop="version" label="版本"></el-table-column>
        <!-- <el-table-column prop="note" label="新建时间" ></el-table-column> -->
        <el-table-column fixed="right" label="流程启动">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="流程启动" placement="top-start">
              <el-button type="primary" size="small" @click="start(scope.row.id)">
                <i class="el-icon-video-play"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="表单操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="表单管理" placement="top-start">
              <el-button type="primary" size="small" @click="management(scope.row.modelId)">
                <i class="el-icon-setting"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="基本操作" width="250">
          <template slot-scope="scope">
            <el-tooltip class="item itema" effect="dark" content="查看流程图" placement="top-start">
              <el-popover placement="right" trigger="click" @show="getImg(scope.row.deploymentId)">
                <img :src="url" alt style="width:100%" />
                <el-button slot="reference" type="primary" size="small">
                  <i class="el-icon-view"></i>
                </el-button>
              </el-popover>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
              <el-button size="small" @click="del(scope.row.deploymentId)">
                <i class="el-icon-delete"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <page
        :page="formInline.current"
        :limit="formInline.size"
        :total="formInline.total"
        @change="changePage"
      ></page>
      <Add ref="Add" @refresh="RightFetch"></Add>
      <Edit ref="Edit" @refresh="RightFetch"></Edit>
    </div>
  </Main>
</template>

<script>
import Main from "@/components/basic-container/main";
import page from "@/components/basic-page/page";
import DepartTree from "@/components/auth/departTree";
import { activeUrl } from "@/config/env";
import Add from "./add";
import Edit from "./edit";
const urls = {
  delete: activeUrl + "/activiti_define_delete",
  Rightlist: activeUrl + "/activitDefineListPage",
  leftList: activeUrl + "/category/category/list",
  getImg: activeUrl + "/model/getImgByDeploymentId",
  start: activeUrl + "/activiti_define_start"
};
export default {
  mounted() {
    this.fetch();
  },
  methods: {
    sortChange(column, prop, order) {
      var order = {
        asc: column.order == "ascending",
        column: column.prop
      };
      var orders = [];
      orders.push(order);
      this.formInline.orders = orders;
      this.RightFetch();
    },
    changePage(val) {
      this.formInline.current = val;
      this.RightFetch();
    },
    add: function() {
      this.$refs.Add.show(this.typeCode);
    },
    edit: function(deployment_id) {
      this.$refs.Edit.show(deployment_id, this.formInline.deptId);
    },
    del: function(deployment_id) {
      this.$confirm("确认要删除该流程吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios
          .get(urls.delete, { params: { deploymentId: deployment_id } })
          .then(res => {
            this.$message(res.data.result);
            this.RightFetch();
          });
      });
    },
    look: function(deployment_id) {
      axios
        .get(urls.getImg, { params: { deploymentId: deployment_id, r: new Date() } })
        .then(res => {
          console.log(res);
        });
    },
    management: function(modelId) {
      this.$router.push({
        path: "/d25e15d08b762a8b8aed4923f248090e//e7659f624aaf9173aa0e4adf88e88c56",
        query: { modelId: modelId }
      });
    },
    start: function(id) {
      axios.get(urls.start, { params: { id: id } }).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: "流程开启成功",
            type: "success"
          });
        } else {
          this.$message({
            message: "流程开启失败",
            type: "fail"
          });
        }
      });
    },
    getImg: function(deployment_id) {
      axios
        .get(urls.getImg, { params: { deploymentId: deployment_id } })
        .then(res => {
          this.url = res.request.responseURL;
          console.log();
        });
    },
    fetch(name) {
      axios.get(urls.leftList).then(res => {
        const data = res.data.result;
        this.LeftTableData = data;
        this.name = data[0].objectId;
        this.RightFetch();
      });
    },
    RightFetch() {
      this.formInline.category_id = this.name;
      axios.get(urls.Rightlist, { params: this.formInline }).then(res => {
        const data = res.data.result;
        this.tableData = data.records;
        this.emptyText = "暂无数据";
        this.formInline.current = data.current;
        this.formInline.size = data.size;
        this.formInline.total = data.total;
      });
    },
    handleNodeClick(e) {
      this.name = e.name;
      this.RightFetch(e.name);
    }
  },
  data() {
    return {
      formInline: {
        realName: null,
        usrName: null,
        deptId: null,
        current: 1, // 当前页
        size: 10, // 每页条数
        total: 0, // 总条数
        orders: [], // 排序
        sorter: {}
      },
      tableData: [],
      LeftTableData: [],
      props: {
        label: "name"
      },
      name: "",
      drawer: false,
      url: "",
      emptyText: "加载中..."
    };
  },
  components: {
    Add,
    Edit,
    Main,
    page,
    DepartTree
  }
};
</script>
<style scoped>
.depart-tree {
  position: absolute;
  background: #fff;
  width: 10%;
  top: 50px;
  left: 6px;
  bottom: 0px;
  overflow-y: scroll;
}
.right {
  background: #fff;
  width: 90%;
  position: absolute;
  right: 6px;
  height: 92%;
}
.user-list {
  position: absolute;
  background: #fff;
  padding: 20px;
  top: 50px;
  left: 270px;
  right: 0;
  bottom: 0px;
}
.middle {
  position: absolute;
  z-index: 88;
  top: 40px;
  left: 250px;
  width: 30px;
  height: 100%;
  background: #f0f2f5;
}
/deep/ .el-tabs__nav-scroll {
  width: 115px !important;
  padding-top: 20px;
}
/deep/ .itema {
  margin-right: 10px;
}
/deep/ .el-tabs--left .el-tabs__nav-wrap.is-left::after,
.el-tabs--left .el-tabs__nav-wrap.is-right::after,
.el-tabs--right .el-tabs__nav-wrap.is-left::after,
.el-tabs--right .el-tabs__nav-wrap.is-right::after {
  top: 25px;
}
</style>